<template>
  <div class="charts-container"></div>
</template>

<script>
import * as echarts from 'echarts';
import debounce from '@/utils/debounce';

export default {
  methods: {
    setHeight(width) {
      this.$el.style.height = `${width * 0.33}px`;
    },
  },
  mounted() {
    this.setHeight(this.$el.clientWidth);
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(this.$el);
    const debounceResize = debounce(this.myChart.resize, 100);
    // 绘制图表
    this.myChart.setOption({
      title: {
        text: 'ECharts 入门示例',
      },
      tooltip: {},
      legend: {
        data: ['访问用户', '下单用户'],
      },
      xAxis: {
        data: ['1/1', '1/2', '1/3', '1/4', '1/5', '1/6'],
      },
      yAxis: {},
      series: [
        {
          name: '访问用户',
          type: 'line',
          smooth: true,
          data: [1393, 3530, 2923, 1723, 3792, 4593],
          stack: 'x',
          areaStyle: {},
        },
        {
          name: '下单用户',
          type: 'line',
          smooth: true,
          data: [1093, 3230, 2623, 1423, 3492, 4293],
          stack: 'x',
          areaStyle: {},
        },
      ],
    });
    this.ob = new ResizeObserver((entries) => {
      entries.forEach((entry) => {
        this.setHeight(entry.contentRect.width);
        debounceResize();
      });
    });
    this.ob.observe(this.$el);
  },
  beforeDestroy() {
    this.ob.unobserve(this.$el);
    this.myChart.dispose();
  },
};
</script>

<style lang="less" scoped>
.charts-container{
  width: 100%;
}
</style>
